<template>
	<header @mouseleave="isShow = false">
		<div class="header-main">
			<div class="header-l">
				<h1 class="logo"><img src="@/assets/logo.png" alt="" /></h1>
				<ul>
					<li v-for="item in topBar" :key="item.id" :class="item.id == currentId ? 'active' : ''" @click="tabBar(item)">{{ item.title }}</li>
				</ul>
			</div>
			<div class="header-r">
				<div class="search">
					<input type="text" placeholder="搜索想要的课程" />
					<el-icon color="#999" :size="20"><Search /></el-icon>
				</div>
				<div class="shop" @click="goCart">
					<el-icon color="#999" :size="24"><ShoppingCart /></el-icon>
				</div>
				<div class="content-login" v-if="!isLogin"><router-link to="login">登录/注册</router-link></div>
				<div class="content-login-success" v-else>
					<div style="cursor:pointer">我的课程</div>
					<div @mouseenter="isShow = true">
						<img class="avator" :src="userInfo.avatar" alt="" v-if="userInfo.avatar" />
						<img v-else class="avator" src="@/assets/img/Avat62.png" alt="" />
					</div>
				</div>

				<!-- 划过头像显示  -->
				<div class="user-info" v-if="isShow">
					<div class="user-info-top">
						<div class="u-i-t-top">
							<img class="avator" :src="userInfo.avatar" alt="" v-if="userInfo.avatar" />
							<img class="avator" src="../../assets/logo02.png" v-else />
							<div class="avator-info">
								<p>{{ userInfo.nickName }}</p>
							</div>
							<div class="vip" v-if="vipInfo">
								<div class="vipImg"><img :src="vipInfo.vipIcon" :class="endTimeVip < 0 ? 'gray' : ''" /></div>
								<div class="vipName">{{ vipInfo.vipName }}</div>
								<div class="endTime" v-if="vipInfo.isExpired === 0">{{ endTimeVip }}天到期</div>
								<div class="endTime" v-else>已过期{{ Math.abs(endTimeVip) }}天</div>
							</div>
						</div>
						<div class="u-i-i-bottom">
							<div>
								<router-link to="/">
									<div class="info-item">
										<img src="../../assets/free.png" />
										<p>我的课程</p>
									</div>
								</router-link>
							</div>
							<div>
								<router-link to="/">
									<div class="info-item">
										<img src="../../assets/order.png" />
										<p>订单中心</p>
									</div>
								</router-link>
							</div>
							<div>
								<router-link to="/">
									<div class="info-item">
										<img src="../../assets/mess.png" />
										<p>我的消息</p>
									</div>
								</router-link>
							</div>
							<div>
								<router-link to="/">
									<div class="info-item">
										<img src="../../assets/setting.png" />
										<p>个人设置</p>
									</div>
								</router-link>
							</div>
						</div>
					</div>
					<div class="user-info-bottom"><div class="logout" @click="outLogin">退出登录</div></div>
				</div>
			</div>
		</div>
	</header>
</template>

<script setup>
// 引入element
import { ShoppingCart, Search } from '@element-plus/icons-vue';
// 路由
let router = useRouter();
// 引入store
import { useUserStore } from '@/stores/use';
//API
import { createToken } from '@/utils/api/createToken';
import { getInfo, logout } from '@/utils/api/login';
// 初始化用户登录状态(默认为否)
let isLogin = ref(false);
// 用户信息
let userInfo = ref({});
// 用户VIP情况
let vipInfo = ref({});
// VIP到期时间
let endTimeVip = ref();
// 显示用户更多数据
let isShow = ref(false);

onBeforeMount(() => {
	createToken().then(res => {
		getInfo({
			token: res.data.token
		}).then(res => {
			// 登录的状态,获取到了用户信息
			if ((res.meta.code = '200')) {
				// 用户信息
				userInfo.value = res.data.data;
				// pinia存储用户信息
				useUserStore().userInfo = res.data.data;
				console.log('header登录ID:', useUserStore().userInfo.id);
				vipInfo.value = res.data.data.vipInfo;
				// 计算会员到期时间
				let now = new Date().getTime();
				let endTime = vipInfo.value.endTime - now;
				endTimeVip.value = Math.floor(endTime / 1000 / 60 / 60 / 24);

				// 判断是否可以获取用户信息
				isLogin.value = true;
			}
			console.log('个人信息', res);
		});
		console.log('临时Token:', res.data.token);
	});
});

// topbar
let topBar = ref([{ id: 1, title: '首 页', name: 'home' }, { id: 2, title: '课 程', name: 'course' }, { id: 3, title: '会 员', name: 'Vip' }]);
// 切换头部class类:
let currentId = ref(1);
// 点击跳转:
const tabBar = item => {
	currentId.value = item.id;
	router.push({
		name: item.name
	});
};
// 监听:
watch(
	() => router.currentRoute.value.name,
	toPath => {
		console.log('页面名称:', toPath);
		if (toPath == 'home') {
			currentId.value = 1;
		} else if (toPath == 'course') {
			currentId.value = 2;
		} else if (toPath == 'Vip') {
			currentId.value = 3;
		}
	},
	//上来就执行
	{ immediate: true }
);

// 退出登录:
//element-plus
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
const outLogin = () => {
	ElMessageBox.confirm('确定退出登录吗？', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(() => {
			logout().then(res => {
				if (res.meta.code == '200') {
					ElMessage.success({
						message: '退出成功'
					});
					// 清除Token
					let userStore = useUserStore();
					userStore.clearToken();
					// 刷新页面
					router.go(0);
				}
			});
		})
		.catch(() => {
			ElMessage.info({
				message: '已取消'
			});
		});
};

//进入购物车
const goCart = () => {
	router.push('/cart');
};
</script>

<style scoped>
header {
	width: 100%;
	height: 80px;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
	position: relative;
	z-index: 999;
}
.header-main {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 1000px;
	height: 80px;
	margin: 0 auto;
	/* background: red; */
}
.header-l {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.logo {
	width: 127px;
	height: 50px;
	margin-right: 15px;
}
.logo img {
	width: 100%;
	height: 100%;
}
.header-l ul {
	display: flex;
	height: 50px;
}
.header-l ul li {
	line-height: 50px;
	/* font-weight: 500; */
	cursor: pointer; /* 可以点击 */
	color: #808080;
}
.header-l ul li + li {
	margin-left: 60px;
	font-size: 16px;
	/* color: #808080; */
}
.header-l ul li.active {
	position: relative;
	font-weight: 500;
	color: #3585ff;
}
.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 140%;
	height: 2px;
	margin-left: -20%;
	background: #3585ff;
}
.header-r {
	display: flex;
	align-items: center;
}
.header-r .search {
	display: flex;
	align-items: center;
	padding: 0 10px;
	width: 300px;
	height: 40px;
	background: #f0f2f4;
	border-radius: 5px;
}
.header-r .search input {
	width: 270px;
	height: 40px;
	border: none;
	background: transparent;
	outline: none;
}
.header-r .shop {
	display: flex;
	align-items: center;
	margin-left: 25px;
	cursor: pointer; /* 可以点击 */
}
.header-r .login {
	margin-left: 39px;
	font-size: 16px;
	color: #808080;
	cursor: pointer; /* 可以点击 */
}
.content-login a {
	padding-left: 20px;
	font-size: 18px;
	color: #808080;
	text-align: center;
	cursor: pointer;
	/* 去除下划线 */
	text-decoration: none;
}

.content-login-success {
	padding-left: 25px;
	height: 53px;
	color: #808080;
	text-align: center;
	width: 180px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 16px;
	font-family: Microsoft YaHei;
	font-weight: 400;
	color: #707070;
}
.avator {
	height: 53px;
	width: 53px;
	cursor: pointer;
	border-radius: 50%;
}
.user-info {
	width: 200px;
	height: 194px;
	background-color: #fff;
	border: 1px solid rgba(248, 250, 252, 1);
	box-shadow: 0px 5px 15px 3px #888888;
	position: absolute;
	top: 75px;
	right: -40px;
	z-index: 999;
	display: block;
	border-radius: 10px;
}
.user-info-top {
	display: flex;
	width: 100%;
	height: 160px;
	border-bottom: 1px solid rgba(248, 250, 252, 1);
	flex-direction: column;
}
.u-i-t-top {
	display: flex;
	height: 80px;
	width: 100%;
	align-items: center;
}
.u-i-t-top img {
	width: 40px;
	height: 40px;
	margin: 0 10px;
	cursor: pointer;
}
.avator-info {
	width: 120px;
	height: 60px;
	font-size: 14px;
	font-family: Microsoft YaHei;
	font-weight: 400;
	color: #333333;
	display: flex;
	flex-direction: column;
	/*align-items: center;*/
}
/*有会员了之后高度微调*/
.avator-info p {
	height: 40px;
	line-height: 40px;
	cursor: pointer;
}
.u-i-i-bottom {
	display: flex;
	height: 100px;
	width: 200px;
	margin-top: 10px;
	flex-wrap: wrap;
	justify-content: space-around;
}
.u-i-i-bottom a {
	text-decoration: none;
}
.info-item {
	width: 90px;
	height: 30px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	font-size: 12px;
	font-family: Microsoft YaHei;
	font-weight: 400;
	color: #333333;
	border-radius: 3px;
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.1) !important;
}
.info-item img {
	width: 14px;
	height: 16px;
}
.user-info-bottom {
	position: relative;
	width: 100%;
	height: 30px;
}
.logout {
	line-height: 30px;
	position: absolute;
	top: 0;
	right: 10px;
	font-size: 12px;
	font-family: Microsoft YaHei;
	font-weight: 400;
	color: #93999f;
	cursor: pointer;
}
/*vip开始*/
.vip {
	display: flex;
	flex-direction: row;
	/*flex-wrap: wrap;*/
	width: 100%;
	height: 30px;
	margin-left: -105px;
	margin-top: 18px;
	font-size: 12px;
	line-height: 30px;
}
.vipImg {
	width: 15px;
	height: 15px;
	margin-right: 12px;
}
.vipImg img {
	width: 100% !important;
	height: 100% !important;
}
.vipName {
	color: #93999f;
}
.endTime {
	padding-left: 2px;
	color: #ff0000;
	position: absolute;
	top: 20px;
	left: 10px;
	font-size: 12px;
}
</style>
